<!-- 配置参数面板 -->
<script setup lang="ts">
import { ref, watch, PropType, reactive, CSSProperties } from 'vue'
import { FormItemProps, FormSchema } from '@/components/Form'
import {
  ElButton,
  ElScrollbar,
  ElInput,
  ElForm,
  ElFormItem,
  ElInputNumber,
  ElSelect,
  ElOption
} from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { cloneDeep } from 'lodash-es'
import { DescriptionsSchema } from '@/components/Descriptions'
import { propsDefault, positionList, delDefaultVal } from '@/components/SetupFormOptionCode'

const props = defineProps({
  currentRow: Object as PropType<DescriptionsSchema>,
  scrollbarHeight: Number
})
const emits = defineEmits(['save'])
const disabled = ref(false)
// 使用 reactive 创建响应式数据
const form = ref({
  // 初始化时使用默认值填充
} as DescriptionsSchema)

watch(
  () => props.currentRow,
  (newRow) => {
    if (!newRow) {
      disabled.value = true
      return
    } else {
      disabled.value = false
      const cloneDefault = cloneDeep(propsDefault.Detail)

      const deepForm = cloneDeep(newRow)
      // 更新 form 数据，使用默认值填充空字段
      form.value = Object.assign(cloneDefault, deepForm) as DescriptionsSchema
    }
  },
  { immediate: true, deep: true }
)

function save() {
  console.log('保存', form)

  const emitForm: any = cloneDeep(delDefaultVal(propsDefault.Detail, cloneDeep(form.value)))

  emits('save', emitForm)
}
</script>
<template>
  <ContentWrap title="选项参数" class="w-300px">
    <template #header>
      <div class="w-100% flex justify-end">
        <ElButton @click="save" type="primary" :disabled="disabled">保存 </ElButton>
      </div>
    </template>
    <el-scrollbar :height="scrollbarHeight" v-if="!disabled">
      <!-- 基础属性 -->
      <ElForm label-position="left" label-width="auto" :model="form">
        <ElFormItem label="字段">
          <ElInput v-model="form.field" />
        </ElFormItem>
        <ElFormItem label="标题">
          <ElInput v-model="form.label" />
        </ElFormItem>
        <ElFormItem label="占24多少份">
          <ElInputNumber v-model="form.span" :min="0" :max="24" />
        </ElFormItem>
        <ElFormItem label="宽度">
          <ElInput v-model="form.width" placeholder="数值+单位,例如：100px" />
        </ElFormItem>
        <ElFormItem label="最小宽度">
          <ElInput v-model="form.minWidth" placeholder="数值+单位,例如：100px" />
        </ElFormItem>
        <ElFormItem label="内容对齐">
          <ElSelect v-model="form.align" placeholder="请选择">
            <ElOption
              v-for="(item, index) in positionList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="标题对齐">
          <ElSelect v-model="form.labelAlign" placeholder="请选择">
            <ElOption
              v-for="(item, index) in positionList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="内容样式名">
          <ElInput v-model="form.className" />
        </ElFormItem>
        <ElFormItem label="标题样式名">
          <ElInput v-model="form.labelClassName" />
        </ElFormItem>
      </ElForm>
    </el-scrollbar>
  </ContentWrap>
</template>
